<template>
  <el-form>
    <el-form-item label="账号">
      <el-input v-model.trim="user.name" :disabled="true" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model.trim="user.password" type="password" show-password />
    </el-form-item>
    <el-form-item label="确认密码">
      <el-input
        v-model.trim="user.confirm_password"
        type="password"
        show-password
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { editPassWord } from '@/api/index'
export default {
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          password: '',
          confirm_password: ''
        }
      }
    }
  },
  methods: {
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },
    submit() {
      const password = this.user.password
      const confirm_password = this.user.confirm_password
      if (password != '') {
        if (password == confirm_password) {
          editPassWord({
            password: password,
            confirm_password: confirm_password
          }).then((res) => {
            this.logout()
            this.$message({
              message: '修改成功，请重新登录',
              type: 'success',
              duration: 2000
            })
          })
        } else {
          this.$message({
            message: '两次密码不一致',
            type: 'error',
            duration: 2000
          })
        }
      } else {
        this.$message({
          message: '密码不能为空',
          type: 'error',
          duration: 2000
        })
      }
    }
  }
}
</script>
